import Taro, { useDidShow } from '@tarojs/taro';
import { useState } from "react";
import { Cell } from '@nutui/nutui-react-taro';
import { Clock, Add, Right } from '@nutui/icons-react-taro';
import { Row, Col } from '@nutui/nutui-react-taro';
import { Api } from '../../api';
import { getToken } from '../../utils';



export default function Attendance() {

  const [absentCount, setAbsentCount] = useState(0);
  const [presentCount, setPresentCount] = useState(0);
  const [lateCount, setLateCount] = useState(0);

  const onJumpClick = (link: string) => {
    if (link) {
      Taro.navigateTo({ url: link });
    }
  };

  //用于在页面显示时执行相应的逻辑,组件显示执行
  useDidShow(() => {
    const token: any = getToken();
    console.log('token', token)//1004
    if (!token) {
      Taro.reLaunch({ url: '/pages/login/index' });
    }

    // 调用接口获取近30天员工出勤记录
    Api.getAttendance(Number(token.id)).then((res) => {
      //将近30天员工出勤记录赋值给变量attendancesData
      const attendancesData = res.data.data;
      console.log('attendancesData11234', attendancesData)//1004
      if (attendancesData) {
        let newAbsentCount = 0;
        let newPresentCount = 0;
        let newLateCount = 0;
        // 遍历出勤记录数组
        attendancesData.forEach((attendance) => {
          const status = attendance.status;
          console.log('status', status)//
          // 根据 status 属性进行条件判断
          if (status === '缺勤') {
            newAbsentCount++;
          } else if (status === '出勤') {
            newPresentCount++;
          } else if (status === '迟到') {
            newLateCount++;
          }
        });
        setAbsentCount(newAbsentCount);
        setPresentCount(newPresentCount);
        setLateCount(newLateCount);
        // 可以在此处使用变量 absentCount、presentCount、lateCount 进行后续操作
      }
    }).catch((error) => {
      // 请求失败的处理逻辑
    });
  });


  return (
    <div className="page-container">

      <Cell className="flex flex-row justify-center items-center">
        <div
          className="h-[100px] flex flex-col justify-center items-center mr-[70px]"
          onClick={() => onJumpClick('/pages/punch/index')}
        >
          <Add className="text-primary" />
          <span className="mt-[10px]">补卡</span>
        </div>

        <div
          className="h-[100px] flex flex-col justify-center items-center"
          onClick={() => onJumpClick('/pages/vacate/index')}
        >
          <Clock className="text-primary" />
          <span className="mt-[10px]">请假</span>
        </div>
      </Cell>

      <Cell className="flex flex-row justify-center items-center">
        <Row gutter="10">
          <Col span="8">
            <div className="flex-content">迟到: {absentCount}</div>
          </Col>
          <Col span="8">
            <div className="flex-content flex-content-light">早退:{presentCount}</div>
          </Col>
          <Col span="8">
            <div className="flex-content flex-content-light">缺勤:{lateCount}</div>
          </Col>
        </Row>
      </Cell>

      <Cell
        title="请假申请记录"
        align="center"
        extra={<Right size={16} />}
        onClick={() => onJumpClick('/pages/vacateRecord/index')}
      ></Cell>

      <Cell
        title="员工考勤记录"
        align="center"
        extra={<Right size={16} />}
        onClick={() => onJumpClick('/pages/attendanceRecord/index')}
      ></Cell>

      <Cell
        title="员工补卡记录"
        align="center"
        extra={<Right size={16} />}
        onClick={() => onJumpClick('/pages/punchRecord/index')}
      ></Cell>

    </div>
  );
}



